<template>
  <div class="top-btn">
    <selectWithoutHttp
      v-model="exportYear"
      :list-data="exportYearOptions"
      class="width120"
      placeholder="请选择"
      @change="freshData"
    />
    <btnGroup
      v-if="needExport && (hasRouteAuth('crm:target:export') || hasRouteAuth('crm:target:import'))"
      ref="btnGroupRef"
      :list="[
        {label:'导入', importApi:'/admin/target/import', callback: freshData, type: 'import', auth: hasRouteAuth('crm:target:import') },
        {label:'导出', exportApi:'/admin/target/export', exportName:'目标', beforeExport: btnExport, type: 'export', auth: hasRouteAuth('crm:target:export')},
      ]"
      style="margin-left: 16px;"
    />
  </div>
</template>

<script>
import selectWithoutHttp from '@/components/Common/selectWithoutHttp';
import ExportButton from '@/components/ExportButton';
import btnGroup from '@/components/Common/baseComponent/btnGroup';
import { hasRouteAuth } from '@/utils/permission';

export default {
  components: { selectWithoutHttp, ExportButton, btnGroup },
  model: {
    prop: 'year',
    event: 'changeYear'
  },
  props: {
    curDept: { // 当前级数
      type: Object,
      default: () => {
        return {};
      }
    },
    year: {
      type: Number,
      default: 2021
    },
    needExport: {
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      exportYearOptions: []
    };
  },
  computed: {
    exportYear: {
      get() {
        return this.year;
      },
      set(val) {
        this.$emit('changeYear', val);
      }
    }
  },
  created() {
    this.getYearOptions();
  },
  methods: {
    hasRouteAuth,
    freshData() {
      this.$emit('freshData', true);
    },
    getYearOptions() {
      const arr = [];
      for (let i = 2010; i <= 2030; i++) {
        arr.push({ value: `${i}年`, id: i });
      }
      this.exportYearOptions = arr;
    },
    btnExport() {
      const params = { year: this.exportYear, id: this.curDept.id || 0 };
      this.$refs['btnGroupRef'] && this.$refs['btnGroupRef'].btnExport(params);
    }
  }
};
</script>

<style lang="scss" scoped>
.width120 {
  width: 120px;
}
.top-btn {
  display: flex;
  align-items: center;
}
.export {
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0 9px;
  height: 32px;
  opacity: 1;
  background: #ffffff;
  border: 1px solid #dddddd;
  border-radius: 4px;
  font-size: 14px;
  color: #666666;
  margin-left: 17px;
}
</style>
